<template>
  <!-- 删除任务 -->
  <a-modal
    centered
    width="600px"
    :open="show"
    :title="title"
    :mask-closable="false"
    :body-style="{ 'padding-bottom': '20px' }"
    :ok-text="okText"
    @ok="emits('ok')"
    @cancel="cancel"
  >
    <div class="tips">
      <span class="icon"><i class="iconfont icon-error-warning-fill"></i></span>
      {{ msg }}
    </div>
    <div class="example">
      <a-list bordered :data-source="data">
        <template #renderItem="{ item, index }">
          <a-list-item :class="{ 'alternate-row': index % 2 !== 1, textLeft: true }">
            <div class="exceedingEllipsis" :title="item"><i class="icon-File iconfont cursor-pointer"></i>{{ item }}</div>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  export interface Props {
    show?: boolean
    title?: string
    msg?: string
    label?: string
    confirmName?: string
    okText?: string
    data: Array<string>
  }

  withDefaults(defineProps<Props>(), {
    show: false,
    title: '确认删除',
    msg: '此认证申请将被驳回，请确认操作！',
    label: '请填写驳回原因*',
    okText: '确定消息并推送',
    confirmName: '',
    data: () => ['']
  })

  const emits = defineEmits(['ok', 'update:show'])

  const cancel = () => {
    console.log('cancel')

    emits('update:show', false)
  }
</script>

<style lang="less" scoped>
  // 删除弹窗
  .tips {
    display: flex;
    margin-bottom: 30px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
    line-height: 24px;

    .icon {
      margin-right: 10px;
      font-size: 24px;
      color: #f59700;

      i {
        font-size: 24px;
      }
    }
  }

  :deep(.ant-modal-footer) {
    padding-top: 44px;
  }

  .example {
    overflow-y: auto;
    min-height: 250px;
    max-height: 700px;
    text-align: center;
    border-radius: 4px;

    .alternate-row {
      background-color: #fafafa;
    }

    .textLeft {
      padding: 12px 16px;
      text-align: left;

      .exceedingEllipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .iconfont {
      margin-right: 8px;
    }
  }
</style>
